﻿{% extends "base.html" %}
{% block head %}
<style type="text/css">
	#selectError{ width:200px;}
	.mylabel{float:left;}
	.mydiv{float:left; margin-top:0px;margin-left:20px;}
	.myspan{color:red;font-size:15px;}
	.clear{clear:both}
	.selector{width:200px;}
</style>
<script type="text/javascript">
	$(function(){
		$("#aix").css("display","none");
		$("#btn_submit").bind('click',fn_submit)
	})
	//系统类型的选择事件
	function fn_onchange(obj){
		if(obj.value == 1){
			$("#suse").css("display","block");
			$("#win").css("display","block");
			$("#aix").css("display","none");
		}else
		{
			$("#aix").css("display","block");
			$("#win").css("display","none");
			$("#suse").css("display","block");
		}
	}
	
	/*
	* 提交之前验证数据
	*/
	function fn_validate(){
		var reason = $("#textarea").val();
		if(reason == ""){
			alert("请填写申请原因！");
			return false;
		}
		else{
			return true;
		}
	}
	/*
	* 提交申请数据
	*/
	function fn_submit(){
		if(fn_validate()){
			var suse,win,aix;
			if($("#selectSystemType").val()==1){
				suse = $("#SuseLinux").val();
				win = $("#Windows").val();
				aix = 0;
			}else
			{
				suse = $("#SuseLinux").val();
				win = 0;
				aix = $("#Aix").val();
			}
			var serverType = $("#selectServerType").val();
			
			var environments = document.getElementsByName("optionsRadios");
			var resson = $("#textarea").val();
			var program = $("#program").val();
			var environment;
			for(var i=0;i<environments.length;i++){
				if(environments[i].checked == true){
					environment = environments[i].value;
				}
			}
			
			var datas = '[{"serverType":'+ serverType +'},'+
						' {"suse":'+ suse +'},'+
						' {"win":'+ win +'},'+
						' {"aix":'+ aix +'},'+
						' {"environment":'+ environment +'},'+
						' {"reason":"'+ resson +'"},'+
						' {"program":"'+ program +'"}'+
						']';
			$.ajax({
				url:"/apply/",
				contentType:"application/json;charset=utf-8",
				//dataType:"json",
				data:datas,
				type:"post",
				success:function(da){
							alert(da);
							if(da=="success"){
								window.location.reload();
							}
						},
				error:function(jqXHR, textStatus, errorThrown){alert(errorThrown)}
			})
		}
	}
</script>
{% endblock %}
{% block content %}
<div class="row">
	<form action="" method="post" class="form-horizontal">
		<fieldset>
			<legend>请填写申请单</legend>
			<table class="table">
				<tr>
					<td>
						<span class="myspan"> * </span>服务器类型：</label>
					</td>
					<td>
						<div class="controls mydiv">
							<select id="selectServerType" class="selector form-control">
								<option value="1">虚拟机</option>
								<option value="2">物理机</option>
							</select>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<span class="myspan"> * </span>&nbsp;系 统 类 型：</label>
					</td>
					<td>
						<div class="controls mydiv">
							<select id="selectSystemType" class="selector form-control" onChange="fn_onchange(this)">
								<option value="1">X86</option>
								<option value="2">Unix架构</option>
							</select>
						</div>
					</td>
				</tr>
				<tr id="toHiddenTr">
					<td>&nbsp;</td>
					<td>
						<div class="controls mydiv" id="suse">
							<label>SuseLinux:
							<select id="SuseLinux">
								<option value="1">1台</option>
								<option value="2">2台</option>
								<option value="3">3台</option>
								<option value="4">4台</option>
								<option value="5">5台</option>
							</select>
							<label>
						</div>
						<div class="controls mydiv" id="win">
							<label>Windows:
								<select id="Windows">
									<option value="1">1台</option>
									<option value="2">2台</option>
									<option value="3">3台</option>
									<option value="4">4台</option>
									<option value="5">5台</option>
								</select>
							</label>
						</div>
						<div class="controls mydiv" id="aix">
							<label>Aix:
								<select id="Aix">
									<option value="1">1台</option>
									<option value="2">2台</option>
									<option value="3">3台</option>
									<option value="4">4台</option>
									<option value="5">5台</option>
								</select>
							</label>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<span class="myspan"> * </span>&nbsp;使 用 环 境：</label>
					</td>
					<td>
						<div class="controls mydiv form-inline">
						  <label class="radio">
							<input type="radio" name="optionsRadios" id="optionsRadios1" value="1" checked>开发环境
						  </label>
						  <label class="radio">
							<input type="radio" name="optionsRadios" id="optionsRadios2" value="2">测试环境
						  </label>
						</div>
					</td>
				</tr>
				<tr>
					<td valign="top">
						<span class="myspan"> * </span>&nbsp;申 请 原 因：</label>
					</td>
					<td>
						<div class="controls mydiv">
						  <textarea class="form-control" id="textarea" rows="7" cols="66" placeholder="请务必填写申请原因，并且将字数控制在100字以内。。。"></textarea>
						</div>
					</td>
				</tr>
				<tr>
					<td valign="top">
						<span class="myspan"> &nbsp;&nbsp; </span>&nbsp;对 应 应 用：</label>
					</td>
					<td>
						<div class="controls mydiv">
						  <input type="text" class="form-control" style="width:440px" id="program">
						</div>
					</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>
						<button type="button" class="btn btn-primary" style="margin-left:200px;" id="btn_submit" >提&nbsp; &nbsp;交</button>
					</td>
				</tr>
			</table>
		</fieldset>
	</form>
</div>
{% endblock %}